<template>
	<div class="box">
		<div class="header">
			LOGO 用户名：{{username}} 头像：xxx
			<button @click="handleLogout">退出登录</button>
		</div>
		<div class="content">
			<div class="menu">
				<div>
					<router-link to="/admin/home">首页</router-link>
				</div>

			</div>
			<div class="page">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		computed:{
			...mapState(['username'])
		},
		methods:{
			handleLogout(){
				localStorage.removeItem('token')
				this.$store.commit('setToken','')
				this.$store.commit('setUsername','')
				this.$router.push('/login')
				this.$message.info("退出登录成功")
			}
		}
	}
</script>

<style scoped>
	.box {
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
	}

	.header {
		height: 80px;
		text-align: center;
		background-color: aquamarine;
	}

	.content {
		flex: 1;
		display: flex;
	}

	.menu {
		width: 200px;
		background-color: bisque;
	}

	.page {
		flex: 1;
		background-color: burlywood;
	}
</style>